<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>当当网注册页面</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.10.2.min.js"></script>
<script>
	
	var cityList = new Array();
	cityList['北京市'] = ['朝阳区', '东城区', '西城区', '海淀区', '宣武区', '丰台区', '怀柔', '延庆', '房山'];
	cityList['上海市'] = ['宝山区', '长宁区', '丰贤区', '虹口区', '黄浦区', '青浦区', '南汇区', '徐汇区', '卢湾区'];
	cityList['广州省'] = ['广州市', '惠州市', '汕头市', '珠海市', '佛山市', '中山市', '东莞市'];
	cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
	cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
	cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
	cityList['江苏省'] = ['南京市', '苏州市', '无锡市'];
	cityList['浙江省'] = ['杭州市', '宁波市', '温州市'];
	cityList['四川省'] = ['四川省', '成都市'];
	cityList['海南省'] = ['海口市'];
	cityList['福建省'] = ['福州市', '厦门市', '泉州市', '漳州市'];
	cityList['山东省'] = ['济南市', '青岛市', '烟台市'];
	cityList['江西省'] = ['江西省', '南昌市'];
	cityList['广西省'] = ['柳州市', '南宁市'];
	cityList['安徽省'] = ['安徽省', '合肥市'];
	cityList['河北省'] = ['邯郸市', '石家庄市'];
	cityList['河南省'] = ['郑州市', '洛阳市'];
	cityList['湖北省'] = ['武汉市', '宜昌市'];
	cityList['湖南省'] = ['湖南省', '长沙市'];
	cityList['陕西省'] = ['陕西省', '西安市'];
	cityList['山西省'] = ['山西省', '太原市'];
	cityList['黑龙江省'] = ['黑龙江省', '哈尔滨市'];
	cityList['其他'] = ['其他'];
	//提交注册按钮
	//鼠标放上去时
	function btn_over(){
		document.getElementById("registerBtn").src="images/register_btn_over.gif";
	}
	//鼠标离开时
	function btn_out(){
		document.getElementById("registerBtn").src="images/register_btn_out.gif";
	}
	//动态生成省份
	function allProvince(){
		let province=document.getElementById("province");//获取id=province的下拉菜单元素
		province.options.length=0;//清空下拉菜单的所有选项
		for(let pn in cityList){ //遍历省份city中的每个元素  pn是省份
			var oOption=document.createElement("OPTION");//创建一个<option>元素
			province.options.add(oOption);//将新创建的<option>元素添加到下拉列表中
			oOption.innerText=pn;//将<option>元素的显示文本为省份名称
			oOption.value=pn;//将<option>元素的值设置为省份名称
		}
		changeCity();	
	}
	function changeCity(){
		let province=document.getElementById("province").value;		//获取 id 为 "province" 的下拉菜单元素的当前选中值，即选择的省份名称
		let city=document.getElementById("city");		//获取 id 为 "city" 的城市下拉菜单元素。
		let cities=cityList[province];			//根据选择的省份名称从城市列表 cityList 中获取对应的城市数组
		city.options.length=0;				//清空城市下拉菜单中的所有选项
		for(let cnid in cities){			//遍历选中省份对应的城市数组中的每个元素，cnid 是城市 ID
			var cname=cities[cnid];			//获取当前城市的名称。
			var oOption=document.createElement("OPTION");//创建一个 <option> 元素
			city.options.add(oOption);			//将新创建的 <option> 元素添加到城市下拉菜单中
			oOption.innerText=cname;			//设置 <option> 元素的显示文本为城市名称
			oOption.value=cname;				//设置 <option> 元素的值为城市名称
			
		}
	}
	window.addEventListener("DOMContentLoaded",function(){
		document.getElementById("registerBtn").onmouseover=btn_over;//当鼠标移动到 id 为 "registerBtn" 的按钮上时，会触发名为 btn_over 的函数
		document.getElementById("registerBtn").onmouseout=btn_out;//当鼠标从 id 为 "registerBtn" 的按钮上移开时，会触发名为 btn_out 的函数
		
		allProvince();//调用了一个名为 allProvince 的函数，这可能是用来初始化省份列表的函数
		document.getElementById("province").onchange=changeCity;//当 id 为 "province" 的省份下拉菜单的值发生变化时，会触发名为 changeCity 的函数，用来更新城市列表
	});
	
	var regArray=[  
					{ 'reg': /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/,  'str': '电子邮件格式不正确，请重新输入'  },
				    { 'reg': /^[a-zA-Z0-9]{4,20}$/,  'str': '昵称格式错误，请用大小写英文字母、数字，长度4-20个字符'  },
					{ 'reg': /^[a-zA-Z0-9]{6,20}$/,  'str': '密码格式错误，请用大小写英文字母、数字，长度6-20个字符'  },
				];
	//提交注册按钮 信息验证
	function checkRegister(){
		var emailR=inputblur('email','email_prompt',1);//邮箱验证
		var nickNameR=inputblur('nickName','nickName_prompt',2);//昵称验证
		var pwdR=inputblur('pwd','pwd_prompt',3);//密码验证
		if(emailR&&nickNameR&&pwdR){ //当所有验证都为真时
			return true;
		}
		return false;
	}		
	//获取焦点 用于在输入框获得焦点时改变其样式并显示相应的提示信息
	function inputfocus(id1,id2,num){
		id1=document.getElementById(id1);
		id1.className="register_input_Focus"; //给输入框添加类名 用于设置样式以显示为获得焦点状态的输入框
		id2=document.getElementById(id2);
		if(num==1){
			id2.innerHTML="此邮箱将是您登录当当网的账号，并用来接收验证邮件";
		}else if(num==2){
			id2.innerHTML="昵称可由大小写英文字母，数字组成，长度为4到20个字符";
		}else if(num==3){
			id2.innerHTML="密码可由大小写字母，数字组成，长度6-20个字符";
		}
		id2.className="register_prompt"; //给提示信息元素添加类名，用于设置样式以显示为普通状态的提示信息
	}
	//失去焦点验证 用于在输入框失去焦点时进行验证，并显示相应的提示信息
	function inputblur(id1,id2,num){
		id1=document.getElementById(id1);	//获取输入框信息
		id2=document.getElementById(id2);	//显示提示信息
		id2.innerHTML="";			//清空提示信息的内容，以便在进行新一轮验证时重新显示
		var reg=regArray[num-1].reg;		//根据传入的 num 参数，从一个名为 regArray 的数组中获取对应位置的正则表达式
		if(!reg.test(id1.value)){		//使用获取到的正则表达式对输入框的值进行验证。如果输入框的值不符合正则表达式规定的格式，即验证失败，则执行以下代码块。
			id2.innerHTML=regArray[num-1].str;	//将验证失败时对应的提示信息写入到提示信息元素中
			id2.className="register_prompt_error";	//给提示信息元素添加类名，用于设置样式以显示为错误状态的提示信息
			return false;	//验证失败时返回 false，表示输入不合法
		}
		id1.className="register_input_Blur";//给输入框添加类名，用于设置样式以显示为失去焦点状态的输入框
		id2.className="register_prompt_ok";//给提示信息元素添加类名，用于设置样式以显示为验证通过状态的提示信息
	}
</script>
</head>

<body>
	
	<div id="header">
	<div id="register_header">
	   <div class="register_header_left"><img src="images/logo.gif" alt="logo"></div>
	   <div class="register_header_right"><a href="index.html" class="blue">首页</a> | <a href="product.html" class="blue">商品展示页</a>  | <a href="shopping.html" class="blue">购物车</a> |  <a href="login.html" class="blue">登录</a></div>
	   </div>
	</div>
	<div id="main">
	  <div class="register_content">
		<div class="register_top_bg"></div> 
		<div class="register_mid_bg">
		  <ul>
			<li class="register_mid_left">填写注册信息</li>
			<li class="register_mid_mid">2. 邮箱验证</li>
			<li class="register_mid_right">3. 完成注册</li>
		</ul>
		</div>
		<div class="register_top_bg_mid">
		<div class="register_top_bg_two_left"></div>
		<div class="register_top_bg_two_right"></div>
		<div class="register_title_bg"><img src="images/register_pic_02.gif" alt="欢迎注册"><br>您所提供的资料不会做其他用途，敬请安心填写。</div>
		</div>
		<div class="register_dotted_bg"></div>
		<div class="register_message">
		<form action="" method="post" id="myform" onsubmit="return checkRegister()">
		 <dl class="register_row">
			<dt>Email地址：</dt>
			<dd><input id="email" type="text" class="register_input"
								onfocus="inputfocus('email','email_prompt',1)"
								onblur="inputblur('email','email_prompt',1)"></dd>
					<dd>
						<div id="email_prompt"></div>
					</dd>
		  </dl>
		  <dl class="register_row">
			 <dt>设置昵称：</dt>
			 <dd><input id="nickName" type="text" class="register_input"
								onfocus="inputfocus('nickName','nickName_prompt',2)"
								onblur="inputblur('nickName','nickName_prompt',2)"></dd>
			 <dd>
				 <div id="nickName_prompt"></div>  <!-- 提示信息 -->
			 </dd>
		  </dl>
		 <dl class="register_row">
			 <dt>设定密码：</dt>
			 <dd><input id="pwd" type="password" class="register_input"
								onfocus="inputfocus('pwd','pwd_prompt',3)"
								onblur="inputblur('pwd','pwd_prompt',3)"></dd>
				<dd>
					<div id="pwd_prompt"></div>
				</dd>
		 </dl> 
		 <dl class="register_row"> 
			 <dt>再输入一次密码：</dt>
			 <dd><input id="repwd" type="password" class="register_input"></dd>
		 </dl>
		 <dl class="register_row">
			<dt>性别：</dt>
			<dd><input name="sex" type="radio" value="男"> <label>男</label></dd>
		   <dd> <input name="sex" type="radio" value="女"> <label>女</label></dd>
		 </dl>
		 <dl class="register_row">
			<dt>所在地区：</dt>
			<dd><select id="province"></select></dd>
			<dd><select id="city"></select></dd>
		  </dl>
		  <div class="registerBtn">
			  <input id="registerBtn" type="image" src="images/register_btn_out.gif"></div>
	   </form>
		</div>
		
		
	  </div>
	  </div>
	<!--网站版权部分开始-->
	<div id="footer">
	<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
	</div>
	</body>
</html>
